<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
    	作者：zyl
    	时间：2017-05-26
    	描述：textAlign和textBaseline
    	
 textAlign定义和用法  	
 textAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。
通常，文本会从指定位置开始，不过，如果您设置为 textAlign="right" 并将文本放置到位置 150，那么会在位置 150 结束。
提示：使用 fillText() 或 strokeText() 方法在实际地在画布上绘制并定位文本。
   
默认值：	start
JavaScript 语法：	context.textAlign="center|end|left|right|start";

 属性值  
		  值					描述
		start			默认。文本在指定的位置开始。
		end				文本在指定的位置结束。
		center			文本的中心被放置在指定的位置。
		left			文本左对齐。
		right			文本右对齐。 
 
 
 textBaseline定义和用法
 textBaseline 属性设置或返回在绘制文本时的当前文本基线。
 注释：fillText() 或 strokeText() 方法在画布上定位文本时，将使用指定的 textBaseline 值。
默认值：	alphabetic
JavaScript 语法：	context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
属性值
值							描述
alphabetic				默认。文本基线是普通的字母基线。（基于拉丁语）
top						文本基线是 em 方框的顶端。。
hanging					文本基线是悬挂基线。（基于印度语）
middle					文本基线是 em 方框的正中。
ideographic				文本基线是表意基线。（基于方块字语）
bottom					文本基线是 em 方框的底端。
    -->
	<body>
		<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
		</canvas>
		<canvas id="Mycanvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
		</canvas>
		<canvas id="Mycanvas1" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
		</canvas>
	</body>
	<script>
	
	//水平方向对齐
		var c=document.getElementById("canvas");
		c.width=400;
		c.height=300;
var ctx=c.getContext("2d");

// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();

ctx.font="15px Arial";

// 显示不同的 textAlign 值
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);

//、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
//垂直方向对齐
var c1=document.getElementById("Mycanvas");
	c1.width=400;
		c1.height=300;
var ctx=c1.getContext("2d");

//在位置 y=100 绘制蓝色线条
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();

ctx.font="20px Arial"

//在 y=200 以不同的 textBaseline 值放置每个单词
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

//、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
var c1=document.getElementById("Mycanvas1");
	c1.width=400;
		c1.height=300;
		//中
var context=c1.getContext("2d");
context.textBaseline="middle";
context.fillText("看我咋样",10,50);
drawBaseline(context,50);
//下
context.textBaseline="bottom";
context.fillText("看我咋样",10,100);
drawBaseline(context,100);
//中
context.textBaseline="top";
context.fillText("看我咋样",10,200);
drawBaseline(context,200);

//函数
function drawBaseline(cxt,h){
	var width= ctx.canvas.width;
	ctx.save();
	ctx.strokeStyle="#888";
	cxt.moveTo(0,h);
	cxt.lineTo(width,h);
	cxt.stroke();
	cxt.restore();
}
	</script>
</html>
